---
title: مربع اختيار
image: /images/user-guide/tasks/tasks_header.png
---

<Frame>
  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
</Frame>

يُستخدم عندما يحتاج المستخدم إلى اختيار قيم متعددة من بين عدة خيارات.

<Tabs>
<Tab title="Usage">

```jsx
import { Checkbox } from "twenty-ui/display";

export const MyComponent = () => {
  return (
    <Checkbox
      checked={true}
      indeterminate={false}
      onChange={() => console.log("onChange function fired")}
      onCheckedChange={() => console.log("onCheckedChange function fired")}
      variant="primary"
      size="small"
      shape="squared"
    />
  );
};
```

</Tab>
<Tab title="Props">

| المحددات                 | النوع       | الوصف                                                                                                          |
| ------------------------ | ----------- | -------------------------------------------------------------------------------------------------------------- |
| مختار                    | قيمة منطقية | يشير إلى ما إذا كان مربع الاختيار محددًا                                                                       |
| indeterminate            | قيمة منطقية | Indicates whether the checkbox is in an indeterminate state (neither checked nor unchecked) |
| عند التغيير              | function    | الدالة التي ترغب في تفعيلها عند تغيير حالة مربع الاختيار                                                       |
| عند تغيير الحالة المحددة | function    | The callback function you want to trigger when the `checked` state changes                                     |
| التنوع                   | string      | النمط البصري للصندوق. تشمل الخيارات: `رئيسي`, `ثانوي`, و `ثالثي`               |
| الحجم                    | string      | حجم مربع الاختيار. Has two options: `small` and `large`                        |
| الشكل                    | string      | شكل مربع الاختيار. لديه خياران: 'مربع' و 'مدور'                                |

</Tab>
</Tabs>
